用到的插件mammoth
安装
1
| npm install --save mammoth
|
tip:只能预览.docx文件
(只能转换.docx文档,转换过程中复杂样式被忽,居中、首行缩进等)
完整代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47
| <template> <div class="word-wrap"> <div id="wordView" v-html="wordText" /> </div> </template>
<script>
import mammoth from "mammoth"; export default { data() { return { wordText: "", wordURL: 'vue-mobile/media/word.docx' }; }, created() { this.getWordText(); }, methods: { getWordText() { const xhr = new XMLHttpRequest(); xhr.open("get", this.wordURL, true); xhr.responseType = "arraybuffer"; xhr.onload = () => { if (xhr.status == 200) { mammoth.convertToHtml({ arrayBuffer: new Uint8Array(xhr.response) }).then((resultObject) => { this.$nextTick(() => { this.wordText = resultObject.value; }); }); } }; xhr.send(); } }, }; </script>
<style lang="less"> .word-wrap { padding: 15px; img { width: 100%; } } </style>
|
改颜色 可以改标签
原文章 :https://www.cnblogs.com/zjianfei/p/14862952.html